<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: url(./banner.jpg) no-repeat;
            background-size: 1920px 969px;
            height:100vh;
            overflow:hidden;
        }

        #china {
            width: 1200px;
            height: 960px;
            margin: 0 auto
        }

        .logo {
            position: absolute;
            width: 50px;
            animation: twinkling .5s infinite ease-in-out;
        }

        @keyframes twinkling {

            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <div id="china"></div>
    <script src="./static/js/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>
        $.get('./static/js/china.json', function (chinaJson) {
            echarts.registerMap('china', chinaJson);
            var chart = echarts.init(document.getElementById('china'));
            chart.setOption({
                title: {
                    text: '合简中医',
                    left: 'center'
                },
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{b}<br/>{c}  人'
                // },
                tooltip: false,
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                visualMap: {
                    min: 0,
                    max: 41,
                    left: 'left',
                    show: false,
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    color: ['orangered', 'yellow', 'lightskyblue'],
                    //color: [ '#fcf8af', '#a9d6fd', '#fbf7b0', 'lightskyblue', 'skyblue' ]
                },
                toolbox: {
                    show: false,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {
                            readOnly: false
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                grid: {
                    x: 40, //默认是80px
                    y: 30, //默认是60px
                    x2: 40, //默认80px
                    y2: 30 //默认60px
                },
                series: [{
                    name: '迁出地区',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data: [{
                        "name": "北京",
                        "id": "110000",
                        "value": "3"
                    }, {
                        "name": "天津",
                        "id": "120000",
                        "value": 0
                    }, {
                        "name": "河北",
                        "id": "130000",
                        "value": 0
                    }, {
                        "name": "山西",
                        "id": "140000",
                        "value": "2"
                    }, {
                        "name": "内蒙古",
                        "id": "150000",
                        "value": 0
                    }, {
                        "name": "辽宁",
                        "id": "210000",
                        "value": "2"
                    }, {
                        "name": "吉林",
                        "id": "220000",
                        "value": "3"
                    }, {
                        "name": "黑龙江",
                        "id": "230000",
                        "value": "2"
                    }, {
                        "name": "上海",
                        "id": "310000",
                        "value": 0
                    }, {
                        "name": "江苏",
                        "id": "320000",
                        "value": "1"
                    }, {
                        "name": "浙江",
                        "id": "330000",
                        "value": 0
                    }, {
                        "name": "安徽",
                        "id": "340000",
                        "value": "2"
                    }, {
                        "name": "福建",
                        "id": "350000",
                        "value": 0
                    }, {
                        "name": "江西",
                        "id": "360000",
                        "value": "4"
                    }, {
                        "name": "山东",
                        "id": "370000",
                        "value": "1"
                    }, {
                        "name": "河南",
                        "id": "410000",
                        "value": "3"
                    }, {
                        "name": "湖北",
                        "id": "420000",
                        "value": "12"
                    }, {
                        "name": "湖南",
                        "id": "430000",
                        "value": "10"
                    }, {
                        "name": "广东",
                        "id": "440000",
                        "value": "6"
                    }, {
                        "name": "广西",
                        "id": "450000",
                        "value": "3"
                    }, {
                        "name": "海南",
                        "id": "460000",
                        "value": "2"
                    }, {
                        "name": "重庆",
                        "id": "500000",
                        "value": 0
                    }, {
                        "name": "四川",
                        "id": "510000",
                        "value": 0
                    }, {
                        "name": "贵州",
                        "id": "520000",
                        "value": 0
                    }, {
                        "name": "云南",
                        "id": "530000",
                        "value": 0
                    }, {
                        "name": "西藏",
                        "id": "540000",
                        "value": 0
                    }, {
                        "name": "陕西",
                        "id": "610000",
                        "value": "1"
                    }, {
                        "name": "甘肃",
                        "id": "620000",
                        "value": "1"
                    }, {
                        "name": "青海",
                        "id": "630000",
                        "value": 0
                    }, {
                        "name": "宁夏",
                        "id": "640000",
                        "value": 0
                    }, {
                        "name": "新疆",
                        "id": "650000",
                        "value": "1"
                    }, {
                        "name": "台湾",
                        "id": "710000",
                        "value": 0
                    }, {
                        "name": "香港",
                        "id": "810000",
                        "value": 0
                    }, {
                        "name": "澳门",
                        "id": "820000",
                        "value": 0
                    }]
                }]
            });


            chart.on('click', function (params) {
                createLogo(params.event.event.clientX, params.event.event.clientY)
                this.dispatchAction({
                    type: 'mapToggleSelect',
                    name: params.name
                });
            });

        });

        function createLogo(x, y) {
            var img = $('<img class="logo" src="./logo.png" alt="合简中医">')
            img.css({
                left: x - 25,
                top: y - 23.4
            })
            $('body').append(img)
        }
    </script>
</body>

</html>